<template>
  <div>
    <el-drawer
      :title="title"
      :destroy-on-close="true"
      v-model="isShow"
      direction="rtl"
      size="45%"
      @close="closeDra"
    >
      <el-form
        :model="formData"
        ref="form"
        :rules="formRules"
        label-position="top"
        label-width="80px"
        :inline="false"
      >
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="所属小区" prop="community_code">
              <el-select
                placeholder="请选择小区"
                style="width: 100%"
                v-model="formData.community_code"
                @change="changeBuilding"
              >
                <el-option
                  v-for="item in communityList"
                  :key="id"
                  :label="item.name"
                  :value="item.code"
                >
                  {{ item.name }}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="收费项目" prop="project_code">
              <el-select
                placeholder="请选择收费项目"
                style="width: 100%"
                v-model="formData.project_code"
                clearable
              >
                <el-option
                  v-for="item in projectList"
                  :key="id"
                  :label="item.name"
                  :value="item.code"
                >
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="所属楼栋" prop="house">
              <el-select
                placeholder="请选择栋数"
                style="width: 100%"
                v-model="formData.house"
                @change="changeHouse"
              >
                <el-option
                  v-for="item in houseList"
                  :key="id"
                  :label="item.name"
                  :value="item.code"
                >
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="房产信息" prop="building">
              <el-select
                placeholder="请选择房产信息"
                style="width: 100%"
                v-model="formData.building"
                clearable
              >
                <el-option
                  v-for="item in buildingList"
                  :key="id"
                  :label="item.name"
                  :value="item.id"
                >
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="应收金额" prop="amount_total">
              <el-input
                style="width: 100%"
                v-model="formData.amount_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="实收金额" prop="amount_paid">
              <el-input
                style="width: 100%"
                v-model="formData.amount_paid"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0"></el-col>
          <el-col :span="12" :offset="0"></el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            style="width: 100%"
            v-model="formData.remark"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-row :gutter="20" type="flex" justify="end">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="isShow = false">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref, toRaw } from "vue";
import { getBuildingInfoList } from "@/api/house.js";
import { getExpensesList } from "@/api/expenses.js";
import { getCommunityList, getBuildingList } from "@/api/community_yuan.js";
import {
  addUserAdList,
  getUserAdInfo,
  editUserAdList,
} from "@/api/adminUser.js";
import { ElMessage } from "element-plus";

const isShow = ref(false);
const form = ref();
const communityList = ref([]);
const projectList = ref([]);
const houseList = ref([]);
const buildingList = ref([]);
const emit = defineEmits("updatalist");

const formData = reactive({
  amount_paid: "",
  amount_total: "",
  building: "",
  community_code: "",
  house: "",
  project_code: "",
  remark: "",
  id: null,
});

const formRules = ref({
  community_code: [
    { required: true, message: "请输选择所属小区", trigger: "change" },
  ],
  project_code: [
    { required: true, message: "请选择收费项目", trigger: "change" },
  ],
  amount_paid: [{ required: true, message: "请输入实收金额", trigger: "blur" }],
  amount_total: [
    { required: true, message: "请输入应收金额", trigger: "blur" },
  ],
  remark: [{ required: true, message: "请填入备注信息", trigger: "blur" }],
});

const initData = async () => {
  let { data } = await getCommunityList();
  communityList.value = data;
};

const changeBuilding = async () => {
  let { data } = await getBuildingList(formData.community_code);
  buildingList.value = data;
  let { data: project } = await getExpensesList();
  projectList.value = project;
};

const changeHouse = async () => {
  let { data: house } = await getBuildingInfoList(formData.building);
  houseList.value = house;
};

onMounted(() => {
  initData();
});

const onSubmit = async () => {
  try {
    await form.value.validate();
    const data = toRaw(formData);
    formData.id !== null
      ? await editUserAdList(data)
      : await addUserAdList(data);
    ElMessage.success("提交成功");
    isShow.value = false;
    emit("updatalist");
  } catch (error) {
    console.log(error);
  }
};
const title = computed(() =>
  formData.id !== null ? "修改收费项目" : "添加收费项目"
);
const closeDra = async () => {
  await nextTick(() => {
    form.value.resetFields();
  });
  Object.assign(formData, {
    amount_paid: "",
    amount_total: "",
    building: "",
    community_code: "",
    house: "",
    project_code: "",
    remark: "",
    id: null,
  });
};

const replayInfo = async (id) => {
  // alert(id)
  let { data } = await getUserAdInfo(id);
  Object.assign(formData, data);
  changeBuilding();
  changeHouse();
  isShow.value = true;
};

defineExpose({
  isShow,
  replayInfo,
});
</script>

<style lang="scss" scoped></style>
